<template>
    <div id="account-det">
        <el-breadcrumb class="common-bread" separator="/">
            <el-breadcrumb-item :to="{ path: '/accountNumber' }">账号管理</el-breadcrumb-item>
            <el-breadcrumb-item>账号详情</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="form mt10 contentBox">
            <div class="list_head">
                <span class="head_name">账号信息</span>
                <el-button type="primary" @click="$router.push('/accountNumber')" class="fr ml10">返回</el-button>
            </div>
            <el-form label-width="120px" :model="form" :rules="rules" ref="form" disabled>
                <el-form-item label="账号名称：" prop="userName">
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="称呼：" prop="jobTitle">
                    <el-input v-model="form.jobTitle"></el-input>
                </el-form-item>
                <el-form-item label="类型：" prop="type" required>
                    <el-select v-model="form.type">
                        <el-option :label='item.label' :value='item.value' v-for='item in permissions'
                            :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="省市：" prop="cityId" required>
                    <el-select v-model="form.cityId">
                        <el-option :label='item.areaName' :value='item.areaId' v-for="item in cities"
                            :key="item.areaId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区县：" prop="zoneId" required>
                    <el-select v-model="form.zoneId">
                        <el-option :label='item.areaName' :value='item.areaId' v-for="item in zones" :key="item.areaId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学校：" prop="schoolName" v-if="[2,3].includes(form.type)">
                    <el-input v-model="form.schoolName"></el-input>
                </el-form-item>
                <el-form-item label="教职工号：" prop="workNumber" v-if="form.type==2">
                    <el-input v-model="form.workNumber"></el-input>
                </el-form-item>
                <div class="list_head">
                    <span class="head_name">账号登陆</span>
                </div>
                <el-form-item label="手机号：" prop="phone">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="form.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码：" prop="rePassword">
                    <el-input v-model="form.rePassword" type="password"></el-input>
                </el-form-item>

            </el-form>

        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                userId: "",
                form: {
                    userName: "",
                    jobTitle: "",
                    type: "",
                    cityId: null,
                    zoneId: null,
                    workNumber: "",
                    phone: "",
                    password: "",
                    rePassword: ""
                },
                cities: [],
                zones: [],
                permissions: [{
                    label: "超级管理员",
                    value: 0,
                    permiss: [0]
                }, {
                    label: "管理员",
                    value: 1,
                    permiss: [0]
                }, {
                    label: "校方",
                    value: 2,
                    permiss: [0, 1]
                }, {
                    label: "教师",
                    value: 3,
                    permiss: [0, 1, 2]
                }],
                rules: {
                    userName: [
                        { required: true, message: "账号名称不能为空", trigger: "blur" }
                    ],
                    phone: [
                        { required: true, message: "手机号不能为空", trigger: "blur" }
                    ],
                    rePassword: [
                        { required: true, message: "确认密码不能为空", trigger: "blur" }
                    ],
                    password: [
                        { required: true, message: "密码不能为空", trigger: "blur" }
                    ],
                    workNumber: [
                        { required: true, message: "教职工号不能为空", trigger: "blur" }
                    ]
                }
            }
        },
        computed: mapState({ user: state => state.user }),
        mounted() {
            this.userId = this.$util.getUrlParam("id");
            this.$util.setStore("accountSelect", "1");
            this.getDetail();
        },
        methods: {
            //获取账号详情
            getDetail() {
                this.$axios.get("/adminapi/v1/tools/user/get?userId=" + this.userId).then(response => {
                    if (response.data.error == 10000) {
                        let userInfo = response.data.data;

                        this.$util.getCityAndZoneById(userInfo.areaId).then(area => {
                            this.cities = [area.city];
                            this.zones = [area.zone];
                            this.form = {
                                userName: userInfo.userName,
                                jobTitle: userInfo.jobTitle,
                                type: userInfo.userType,
                                cityId: area.city.areaId,
                                zoneId: area.zone.areaId,
                                workNumber: userInfo.workNumber,
                                phone: userInfo.phone,
                                password: userInfo.password,
                                rePassword: userInfo.password,
                                schoolName: userInfo.schoolName
                            };

                        })
                    }
                })
            }
        }
    }
</script>
<style>
    #account-det .el-input {
        width: 200px;
    }

    #account-det .el-input,
    #account-det .el-select,
    #account-det .el-input_inner {
        width: 300px;
    }
</style>